<template>
  <view class="table-data flex flex-column">
    <view class="title" v-if="tableData.statisticsTitle">{{ tableData.statisticsTitle }}</view>
    <view class="line" v-if="tableData.statisticsTitle"></view>
    <view class="f_1">
      <scroll-view scroll-y style="height: 100%" lower-threshold="60" @scrolltolower="scrolltolower"
        class="list-wrapper">
        <view class="table-header flex flex-row">
          <text v-for="(item, index) in tableData.title" :key="index" :style="{ width: tableData.props[index].width }">{{
            item
          }}
          </text>
        </view>
        <view class="table-body" v-if="dataSource.length !== 0">
          <view v-for="(item, index) in dataSource" :key="index" class="flex flex-row row" @click="rowClick(item)">
            <view v-for="(prop, propIndex) in tableData.props" :key="propIndex" class="column"
              :style="{ width: prop.width }">
              <view v-if="prop.key === 'index'">{{ index + 1 }}</view>
              <view v-else class="flex flex-row item-center between">
                <text>{{ item[prop.key] }}</text>
                <u-icon v-if="propIndex + 1 === tableData.props.length" name="arrow-right" color="#999999"
                  size="14"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <Empty v-else></Empty>
      </scroll-view>
    </view>
  </view>

</template>
<script>
import Empty from '@/improve/components/common/Empty.vue';

export default {
  name: "Table",
  components: { Empty },
  props: {
    tableData: {
      type: Object,
    },
    //是否分页
    isPage: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {
    dataSource() {
      return this.tableData.list
    },
  },
  methods: {
    scrolltolower() {
      if (this.isPage) {
        this.$emit("scrolltolower", true);
      }
    },
    rowClick(item) {
      this.$emit("rowClick", item);
    }
  }
}
</script>
<style scoped lang="scss">
.table-data {
  background-color: #FFFFFF;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  height: 100%;

  .title {
    height: 60px;
    line-height: 60px;
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    padding: 0 23px;
  }

  .table-header {
    padding: 18px 20px;
    font-size: 28rpx;
    color: #999999;
  }

  .table-body {
    .row {
      padding: 18px 20px;
      font-size: 32rpx;
      color: #333333;
      border-bottom: solid 1px #F2F2F2;
    }

    .column {}
  }

  .line {
    width: 100%;
    background-color: #F2F2F2;
    height: 4rpx;
  }
}
</style>